<template>
	<view class="member" :style="memberstyle">
		<view class="sign_btn" @click="gopage(3)" v-if="mydata.sign.show && issign" :style="'background:' + mydata.sign.bg_color + ';color:' + mydata.sign.text_color">
			<text class="el-sc-riqi3"></text>
			<text>{{ mydata.sign.text }}</text>
		</view>
		<view class="top">
			<view :class="mydata.avart_type == 2 ? 'img-box radius' : 'img-box'">
				<vimage v-if="token" :src="UserInfo.picurl" class="avart" mode=""></vimage>
				<vimage v-else imgtype="1" src="static/images/nologin.jpg" class="avart" mode=""></vimage>
			</view>
			<view class="body">
				<text @click="touserdetail" v-if="token" class="username" :style="'color:' + mydata.namecolor">
					<text style="margin-right: 15rpx;" class="el-sc-shezhi2"></text>
					{{ UserInfo.nickname }}
				</text>
				<text v-else class="username" :style="'color:' + mydata.namecolor" @click="tologin">登录/注册</text>
				<text class="level" v-if="token">
					<text class="levelname">ID:{{ UserInfo.id }}</text>
				</text>
			</view>
		</view>
		<view class="btns" v-if="mydata.finance.btns.length > 0">
			<template v-for="(item, i) in mydata.finance.btns">
				<view
					v-if="finance[item].addons_id == -1 || addons.indexOf(finance[item].addons_id) > -1"
					:key="i"
					@click="gopage(item)"
					:class="mydata.finance.btns.length - 1 == i ? 'btn' : 'btn yue'"
					:style="'border-color:' + mydata.finance.linecolor"
				>
					<text class="num" :style="'color: ' + mydata.finance.numcolor">{{ UserInfo[finance[item].name] || 0 }}</text>
					<text class="content" :style="'color: ' + mydata.finance.titlecolor">{{ finance[item].value }}</text>
				</view>
			</template>
		</view>
		<view class="order_btns" v-if="mydata.btn.show">
			<view class="order_item" v-for="(item, i) in mydata.list" :key="i" @click="Jumpurl(item.linkdata)">
				<text :style="'color:' + mydata.btn.icon_color" :class="item.icon + ' iconfont'"></text>
				<text :style="'color:' + mydata.btn.text_color" class="title">{{ item.text }}</text>
			</view>
		</view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
	</view>
</template>

<script>
import util from '@/common/util.js';
import {mapState, mapMutations} from 'vuex';
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			finance: [
				{
					value: '余额',
					name: 'total',
					addons_id: -1
				},
				{
					value: '积分',
					name: 'integral',
					addons_id: -1
				},
				{
					value: '优惠券',
					name: 'coupons',
					addons_id: 3
				}
			],
			linkdata: {
				link: '../marketing/signin',
				type: 1,
				login_type: 1
			},
			// UserInfo: {},
			islogin: false,
			issign: false
		};
	},

	computed: {
		memberstyle() {
			if (this.mydata.imgbg && this.mydata.imgbg.indexOf('http') == -1) {
				this.mydata.imgbg = util.getimgurl(this.mydata.imgbg);
			}
			return 'background:' + (this.mydata.bg_type == 1 ? this.mydata.bg : this.mydata.imgbg ? 'url(' + this.mydata.imgbg + ')' : this.mydata.bg) + ';';
		},
		...mapState({
			UserInfo: state => state.userInfo,
			token: state => state.token,
			addons: state => state.addons
		})
	},
	created() {
		this.getjuris('integralBalance').then(a => {
			if (a.balance_text) {
				this.finance[0].value = a.balance_text;
			}
			if (a.integral_text) {
				this.finance[1].value = a.integral_text;
			}
			if (!a.is_open) {
				this.finance[1].addons_id = -2;
			}
		});
		let _this = this;
		if (this.addons.indexOf(5) > -1) {
			this.judgeLogin(
				() => {},
				() => {
					_this.getsign();
				}
			);
		}
	},
	watch: {
		g_id() {
			let _this = this;
			if (this.addons.indexOf(5) > -1) {
				this.judgeLogin(
					() => {},
					() => {
						_this.getsign();
					}
				);
			}
		}
	},
	methods: {
		getsign() {
			this.$http('/signin/config', {}, 'GET').then(res => {
				this.issign = !!res.data.msg.style;
			});
		},
		touserdetail() {
			this.Jumpurl({
				type: 1,
				link: '../mine/editinfo',
				login_type: 2
			});
		},
		tologin() {
			this.$store.commit('setlogin', false);
		},
		gopage(type) {
			if (type == 1) {
				this.Jumpurl({
					type: 1,
					link: '../mine/integral/integral',
					login_type: 2
				});
			}
			if (type == 0) {
				this.Jumpurl({
					type: 1,
					link: '../mine/balance/balance',
					login_type: 2
				});
			}
			if (type == 2) {
				this.Jumpurl({
					type: 1,
					link: '../conpon/conpon?type=1',
					login_type: 2
				});
			}
			if (type == 3) {
				this.Jumpurl({
					type: 1,
					link: '../marketing/signin',
					login_type: 2
				});
			}
		},
		logincallback(data) {
			let _this = this;
			if (this.addons.indexOf(5) > -1) {
				this.judgeLogin(
					() => {},
					() => {
						_this.getsign();
					}
				);
			}
		}
	}
};
</script>

<style lang="scss">
.member {
	width: 750rpx;
	margin: 0 auto;
	position: relative;
	background: #ff3c29;
	overflow: hidden;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	padding-bottom: 20rpx;
	.top {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		position: relative;
		z-index: 1;
		padding: 32rpx 24rpx 48rpx;
	}
	.sign_btn {
		position: absolute;
		top: 70rpx;
		right: 0;
		width: 222rpx;
		height: 70rpx;
		background: #eb4521;
		border-radius: 34rpx 0px 0px 34rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #ffffff;
		z-index: 100;
		.el-sc-riqi3 {
			margin: 0 12rpx 0 18rpx;
		}
	}
	.img-box {
		width: 140rpx;
		height: 140rpx;
		flex-shrink: 0;
		overflow: hidden;
		box-sizing: border-box;
		border: 1rpx solid #e6e7eb;
		margin-right: 40rpx;
		border-radius: 50%;

		&.radius {
			border-radius: 12rpx;
		}

		.avart {
			width: 100%;
			height: 100%;
		}
	}

	.body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		flex: 1;
		font-family: PingFang SC;
		font-style: normal;
		.username {
			font-size: 32rpx;
			line-height: 32rpx;
			padding: 6rpx 0;
			font-weight: bold;
		}

		.level {
			margin-top: 24rpx;
			font-size: 26rpx;
			line-height: 52rpx;
			// padding: 2px 6px 2px 4px;
			width: 200rpx;
			height: 52rpx;
			background: rgba(255, 255, 255, 0.4);
			// opacity: 0.4;
			border-radius: 26rpx;
			color: #ffffff;
			text-align: center;
			display: inline-block;
			.levelname {
				vertical-align: 2rpx;
				display: inline-block;
				opacity: 1;
			}
		}
	}

	.icon-right {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		font-size: 40rpx;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		margin: auto 0;
	}

	.btns {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		position: relative;
		z-index: 1;

		font-family: PingFang SC;
		font-style: normal;
		margin-bottom: 40rpx;
		.btn {
			width: 0;
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: center;
			margin: 0;
			justify-content: space-between;
			padding-top: -8rpx;

			.num {
				font-weight: bold;
				font-size: 36rpx;
				line-height: 24rpx;
				margin: 0 auto 30rpx;
			}

			.content {
				font-size: 24rpx;
				line-height: 24rpx;
				margin: 0 auto 0;
			}
		}
	}
}
.order_btns {
	width: 696rpx;
	height: 184rpx;
	background: #ffffff;
	box-shadow: 0px 8rpx 10rpx 0px rgba(0, 0, 0, 0.18);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	margin: 0 auto;
	.order_item {
		display: flex;
		align-items: center;
		flex-direction: column;
		flex: 1;
		.title {
			font-size: 24rpx;
			margin-top: 20rpx;
			font-weight: bold;
		}
		.iconfont {
			font-size: 60rpx;
		}
	}
}
</style>
